【Day04】 Hello World!

2018鐵人賽 reactjs 瑞瑞腦袋日記2.0

洪啟瑞

團隊30天熱度

2017-12-23 09:49:48

7522 瀏覽

分享至

前一篇已經把所有需要事前安裝的東西們來歷用法都弄清楚了
所以本篇要把環境架起來並且運行範例程式碼
確認建置的環境是可以運行ReactJS的

環境建置

首先建立一個根目錄（工作目錄資料夾）
在裡面我們會需要四個檔案

index.html
App.jsx
main.js
webpack.config.js

接著要設定Compiler, Server 和 Loaders
在webpack.config.js中加入下列程式碼

webpack.config.js

// webpack.config.js
var config = {
   entry: './main.js',      // 設定最先開始執行檔案，並進行編譯及包裝 
   output: {                // 設定將程式碼編譯後如何在硬碟中儲存
      path:'/',
      filename: 'index.js',
   },
   devServer: {             // 設定伺服器
      inline: true,
      port: 8080
   },
   module: {                // 使用模組的相關設定
      loaders: [                // 載入器的相關設定
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',         // 設定要使用的載入器
            query: {                        // 需要被轉換的語法清單
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}
module.exports = config;    // 模組匯出

設定完成伺服器資訊後
將下面的程式碼分別寫入檔案中
(程式碼將在之後說明)

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
    <head>
        <title>React test</title>
    </head>
    <body>
        <div id = "app"></div>
        <script src = "index.js"></script>
    </body>
</html>

App.jsx

// App.jsx
import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}
export default App;

main.js

// main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));